<head th:replace="common :: common_head(~{},~{style})" xmlns:th="http://www.thymeleaf.org">
	<style>
		.table th,.table td{ text-align:center;vertical-align:middle!important;}
		.fixed-table-body{
			height:53% !important;
			overflow: auto;
		}
	</style>
</head>


<div class="row">
	<div class="col-md-12">
		<div class="card">

			<div class="toolbar">
				<!--        Here you can write extra buttons/actions for the toolbar              -->
				<button id="add" class="btn btn-secondary">增加家电库存</button>
				<button id="remove" class="btn btn-secondary">删除家电库存</button>
			</div>

			<table id="bootstrap-table" class="table" data-url="/stuff/stufflist">
				<thead>
					<th data-field="checked" data-checkbox="true"></th>
					<th data-field="num" data-formatter="numFormatter">编号</th>
					<th data-field="url" data-sortable="true" data-formatter="urlFormatter">家电库存图片</th>
					<th data-field="name" data-sortable="true">家电库存名称</th>
					<th data-field="typeName" data-sortable="true">家电库存类别</th>
					<th data-field="state" data-sortable="true" data-formatter="statesFormatter">家电库存状态</th>
					<th data-field="actions" class="td-actions text-right"
						data-events="operateEvents" data-formatter="operateFormatter">操作</th>
				</thead>
				<tbody>

				</tbody>
			</table>
		</div>
		<!--  end card  -->
		<div class="card" style="display: flex;">
			<div id="stuffChart1" style="height: 300px; width: 50%;"></div>
			<div id="stuffChart2" style="height: 300px; width: 50%;"></div>
		</div>
		<!--  end card  -->
	</div>
	<!-- end col-md-12 -->
</div>
<!-- end row -->




<script type="text/javascript">
    var $table = $('#bootstrap-table');

    function numFormatter(value, row, index){
    	return index+1;
    }
    
    function urlFormatter(value, row, index){
    	return '<img style="width:37px;height:32px;"  src="'+value+'" />';
    }
	
    function statesFormatter(value, row, index){
    	if(value == 0){
    		return "家电库存充足";
    	}else{
    		return "家电库存不足";
    	}
    }
    
    function operateFormatter(value, row, index) {
        return [
			'<a rel="tooltip" title="View" class="btn btn-simple btn-info btn-icon table-action view" href="javascript:void(0)">',
			'<i class="fa fa-image"></i>',
			'</a>',
            '<a rel="tooltip" title="Edit" class="btn btn-simple btn-warning btn-icon table-action edit" href="javascript:void(0)">',
            '<i class="fa fa-edit"></i>',
            '</a>',
            '<a rel="tooltip" title="Remove" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)">',
            '<i class="fa fa-remove"></i>',
            '</a>'
        ].join('');
    }

    $().ready(function(){
    	$.ajax({
    		dataType:"text",
    		url: "/stuff/stufflist",
    		type: "get",
    		success: function(e) {
    			let stuffs = JSON.parse(e)
    			let stuffPoints = []
    			let sum = 0
    			for (let i = 0; i < stuffs.length; i++) {
    				stuffPoints[i] = {
    					label: stuffs[i].name,
                    	y: Number.parseInt(stuffs[i].number)
    				}
    				sum += stuffPoints[i].y
    			}
    			for (let i = 0; i < stuffs.length; i++) {
    				stuffPoints[i].z = (stuffPoints[i].y * 1.0 / sum * 100).toFixed(2)
    			}
    			var chart1 = new CanvasJS.Chart("stuffChart1", {
                    theme: "light1",
                    animationEnabled: true,
                    title: {
                        text: "家电库存分析柱状图"
                    },
                    data: [{
                        type: "column",
                        dataPoints: stuffPoints
                    }]
                });
                chart1.render();
                var chart2 = new CanvasJS.Chart("stuffChart2", {
                	theme: "light2",
                	exportEnabled: true,
                	animationEnabled: true,
                	title: {
                		text: "家电库存分析饼状图"
                	},
                	data: [{
                		type: "pie",
                		startAngle: 25,
                		toolTipContent: "<b>{label}</b>: {z}%",
                		showInLegend: "true",
                		legendText: "{label}",
                		indexLabelFontSize: 16,
                		indexLabel: "{label} - {z}%",
                		dataPoints: stuffPoints
                	}]
                });
                chart2.render();
    		}
    	})
        window.operateEvents = {
       		 'click .view': function (e, value, row, index) {
       			 layer.open({
	       			 type: 1,
	       			 title: false,
	       			 closeBtn: 0,
	       			 area: ['400px', '300px'],
	       			 offset: '50px',
	       			 skin: 'layui-layer-nobg', //没有背景色
	       			 shadeClose: true,
	       			 content: '<img style="width:100%;height:100%;" src="'+row.url+'"/>'
       			}); 
       		}, 
            'click .edit': function (e, value, row, index) {
                location.href = "/stuff/findById?id="+row.id;
            },
            'click .remove': function (e, value, row, index) {
                //console.log(row);
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: [row.id]
                });
                $.ajax({
                	dataType:"text",
                	url: "/stuff/deteteById?id=" + [row.id],
                	type:"post",
                	success: function(data){
						if (data == "删除成功") {
							swal("成功！", data, "success");
						} else {
							swal("糟糕！", data, "error");
						}
                		$table.bootstrapTable( "refresh");
                	}
                });
            }
        };
        /**删除方法*/
        $("#remove").click(function () {
            var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id;
            });
            if(ids != ""){
            	$.ajax({
                	//data:{"ids":ids},
                	dataType:"text",
                	url:"/stuff/deteteByIds?ids=" + ids ,
                	type:"post",
                	success: function(data){
						if (data == "删除成功") {
							swal("成功！", data, "success");
						} else {
							swal("糟糕！", data, "error");
						}
                		$table.bootstrapTable( "refresh");
                	}
                });
            }
            
            $table.bootstrapTable('remove', {
                field: 'id',
                values: ids,
            });
        });
        /**增加方法*/
        $("#add").click(function () {
            window.location.href="/page/stuff_add";
        });

        $table.bootstrapTable({
            undefinedText: 'N/A',//未定义文本
           // url: dat ,
            toolbar: ".toolbar",//工具按钮用哪个容器
            clickToSelect: true,
            showRefresh: true,
            search: true,
            //showToggle: true,
            //showColumns: true,
            pagination: true,
            searchAlign: 'right',
            searchPlaceholder: '模糊搜索',
            pageSize: 8,
            clickToSelect: false,
            pageList: [8,10,25,50,100],
            formatShowingRows: function(pageFrom, pageTo, totalRows){
                //do nothing here, we don't want to show the text "showing x of y from..."
            },
            formatRecordsPerPage: function(pageNumber){
                return pageNumber + "条/页";
            },
            icons: {
                refresh: 'fa fa-refresh',
                toggle: 'fa fa-th-list',
                columns: 'fa fa-columns',
                detailOpen: 'fa fa-plus-circle',
                detailClose: 'fa fa-minus-circle'
            }
        });

        //activate the tooltips after the data table is initialized
        $('[rel="tooltip"]').tooltip();

        $(window).resize(function () {
            $table.bootstrapTable('resetView');
        });


    });

</script>

<script>


</script>

</html>
